[우테코] level2 - 리액트 페이먼츠 미션 회고
May 14, 2022
level 1에 이어서 level 2가 시작한 지 몇 주가 지났다.
level 2에서는 리액트를 사용해서 웹 애플리케이션을 만드는 미션들이 준비되어있었고, 이번에는 페이먼츠 만드는 미션에 대한 회고를 진행해보려 한다.
미션과 구현
이번 미션은 말 그대로 페이먼츠를 구현하는 것이었다. 페이먼츠를 위한 새로운 카드 등록, 별칭 지정, 카드 리스트 확인 등의 기능을 구현하면 되었다.
리액트 사용
이번 미션은 리액트를 사용하여 웹 어플리케이션을 만들었다. 기존에는 vanilla javascript를 이용하여 사용자와의 상호 작용에 반응을 해주었는데, 이번에는 리액트의 도움을 받아 이전보다 편리하게 사이트를 만들 수 있었다. 지금까지 리액트를 사용해본 결과, 리액트는 개발자들이 화면에 무엇을 그려줄지를 더 집중할 수 있게 도와주는 도구라고 생각되었다. 이전에는, appendChild, innerHTML, insertAdjacentHTML 등을 활용해서 새로 추가된 html 태그를 어떻게, 어디에 넣어줘야 할지 신경을 써줬어야 했다면, 리액트에서는 리액트가 해당 고민을 자동으로 실행해주고 개발자들은 단순히 무엇을 보여주면 될지에만 신경 써주면 된다. 직접 리액트라는 라이브러리를 사용해보고 나니, 무엇을 보여주면 될지만 생각해주면 되어서 편했다. 하지만, 컴포넌트를 어떻게 하면 좋은 컴포넌트로 만들지나 무슨 컴포넌트가 좋은 컴포넌트인지를 파악하는 것이 어려웠다…(사실, 아직도 모르겠다)
form 구현
새로운 카드 등록을 위해 form 기능을 만들었어야 했는데 생각보다 어려웠다. javascript로 구현을 했을 때는 단순히 정보를 넣고 확인 버튼을 누를 때 정보를 담아서 전달만 해주면 되었는데, 리액트에서는 여러 가지의 방식으로 form 정보를 관리할 수 있었다. 제어 컴포넌트와 비제어 컴포넌트를 활용하여 form의 정보를 다루는 것이 이번 미션의 핵심이라고 생각했다. 웹 사이트에는 수많은 form이 존재한다. 여기서, 제어와 비제어 컴포넌트의 장단점을 비교해서 적절한 방식의 관리 방법을 사용해주는 것이 중요할 것 같다.
이번 미션에서는 form에 대부분의 시간을 투자하였다. 좀 더 리액트와 친해진 기분이지만 아직 좋은 컴포넌트란 무엇인가에 대해서는 잘모르겠다…
느낀 점
건강 관리 잘하자
이번 미션을 진행하면서 많이 아팠었다. 열이 38.7도까지 올라갔었고 코로나인줄 알고 4일 연속으로 신속항원검사를 해봤지만 계속 음성이 나왔었다. 알고 보니 장염인 것을 깨달았지만 이미 아픈 와중에 부담되는 음식들을 많이 먹어버렸다. 거의 일주일 넘게를 장염과 싸우면서 미션을 진행하다 보니 미션에 온전히 집중을 못했다는 아쉬움만 남았다. 아프기 전에는 아파도 나는 공부할 수 있어~라고 생각했었는데 막상 아파보니 공부하고 싶은 마음이 없어지는 것을 경험하였다. 이제는 아프면 안 된다. 교육에 온전히 집중할 수 있도록 건강관리를 열심히 하려고 한다. (헬스장도 끊었다ㅎㅎ)
자기반성
생각을 많이 하면서 코딩을 했나?라고 되돌아보았을 때 확신을 가지고 대답을 할 수는 없을 것 같다. step1에서는 재사용 컴포넌트와 커스텀 훅을 마음껏 사용해보면서 새로운 것을 가지고 깊게 생각해봤었지만 step 2에서는 단순히 기능을 구현하기 위해서 열심히 노력했던 것 같다. 음… 다른 크루들이 추가적인 기능을 구현한 것을 보고 조급함이 생겨 다른 기능을 추가하는 것에 급급하지 않았나 싶다. 다른 기능을 추가로 구현하면서 현재 컴포넌트의 구조나 코드에 대해서는 많이 신경을 쓰지 못했다. 선택과 집중을 못한 게 아쉬운 미션이었다.
메인에 집중하자
이번에도 결론은 메인에 집중하자는 것이다. 이전 미션에서 작성했던 포맷에 리액트 공부하기를 추가했다. 레벨 2에서는 리액트를 배우는 것이 중요하기 때문에 1순위로 놓았다. 매일 30분씩 자바스크립트를 공부하는 계획도 세웠으니 잘 실천해봐야겠다.
class 메인 {
constructor {
this.집중할것들 = [리액트 공부하기, 자바스크립트 공부하기, 내 생각을 담아서 코딩하기]
this.집중하기()
}
집중하기() {
실행하다(this.집중할것들)
}
자바스크립트 공부하기() {}
내 생각을 담아서 코딩하기() {}
리액트 공부하기() {
컴포넌트란 무엇인가 고민하고 생각하기
상태란 무엇인가 고민하고 생각하기
}
}